<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="配置名称" ></el-table-column>
      <el-table-column label="状态" width="250">
        <template slot-scope="scope">
          <el-switch 
                     v-model="scope.row.on" 
                     active-value="1"
                     inactive-value="0"
                     active-color="#13ce66"
                     @change="changeSwitch(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" class="editButton" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" class="addButton" @click="AddleEdit(scope.$index, scope.row)">添加</el-button>
          <el-button size="mini" class="deleteButton" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "官方微信",
          children: [
              {
                  id:11,
                  name: "微信号：1234567890"
              }
          ]
        },
        {
          id: 2,
          name: "联系方式",
          children: [
            {
              id: 21,
              name: "传真：（+86）0835-2883166",
            },
            {
              id: 22,
              name: "邮箱：aumdwsb@sicau.edu.cn",
            },
            {
              id: 23,
              name: "地址：四川省雅安市雨城区新康路46号",
            },
            {
              id: 24,
              name: "邮编：625014",
            }
          ]
        },
        {
          id: 3,
          name: "省内链接",
          children: [
            {
              id: 31,
              name: "四川省教育厅",
            },
            {
              id: 32,
              name: "四川省人民政府外事侨务（港澳）",
            },
            {
              id: 33,
              name: "办公室",
            },
             {
              id: 34,
              name: "四川省国外专家局",
            },
          ]
        },
        {
          id: 4,
          name: "国内链接",
          children:[
              {
                  id:41,
                  name:"国家留学基金管理委员会",
              },
              {
                  id:42,
                  name:"中华人民共和国教育部",
              },
              {
                  id:43,
                  name:"中华人民共和国外交部",
              },
              {
                  id:44,
                  name:"教育部涉外监管信息网",
              },
          ]
        },
      ],
      value: '1',
    };
  },
  methods: {
      changeSwitch(data) {
          console.log(data)
      }
  }
};
</script>
<style>
.editButton{
    background-color: #67c23a;
    color: white;
}
.addButton{
    background-color: orange;
    color: white;
}
.deleteButton{
    background-color:#f56c6c;
    color: white;
}
</style>